<template>
    <div style="width: 100%;height: 100%;" v-loading="loading">
        <div id="right-CAD" class="right-CAD"></div>
    </div>
</template>

<script>
import * as svg_opt from "@/utils/svg_opt.js";

import { getSvgData } from "@/api/api";
import testBall from "@/utils/testdata/test_ball.js";
import { showLoading, hideLoading } from "@/utils/loading";
import eventBus from "@/eventBus/bus";
import { getLocalStorage } from "@/utils/storage";
import $ from "jquery";
// 导出模块
export default {
    // 模块名字
    name: "CadViewForBH",

    // 模块数据

    props: {
        svgUrl: String,
        showTypeBy2: Number,
        showTypeBy3: Number,
        proPass: String
    },

    data() {
        //数据
        return {
            sourceExt: '',
            svgSourceUrl: '',
            isSvgLoading: false,
        };
    },

    watch: {
        svgUrl(val) {
            this.initFn(val);
        },
        showTypeBy2(val) {
            this.initFn(this.svgUrl);
        },
        showTypeBy3(val) {
            this.initFn(this.svgUrl);
        },
    },

    methods: {

        onSvgMousePosChange(posX, posY) {
        },
        onSvgLoaded(error) {
            console.log("onSvgLoaded --- ", error);
            this.isSvgLoading = false;
            hideLoading();
            if (error) {
                console.log(error);
                return;
            }

            this.isSvgLoaded = true;

            if (this.isSourcePic) {
                svg_opt.changeSvgElementData({
                    tagName: "img-content",
                    paramName: "xlink:href",
                    newValue: this.sourceUrl
                });
            }

        },
        initFn(inSourceUrl) {
            if (inSourceUrl == null || typeof inSourceUrl == "undefined") {
                svg_opt.removeSvg();
                return;
            }
            let num = inSourceUrl.lastIndexOf(".") + 1;
            this.sourceExt = inSourceUrl.substring(num);
            this.sourceUrl = inSourceUrl;

            let EXT = this.sourceExt
            if (
                EXT == "png" ||
                EXT == "jpg" ||
                EXT == "gif" ||
                EXT == "bmp" ||
                EXT == "jpeg" ||
                EXT == "tif" ||
                EXT == "tiff"
            ) {
                this.isSourcePic = true;
                this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
            } else {
                this.isSourcePic = false;
                this.svgSourceUrl = inSourceUrl;
            }

            if (!this.svgSourceUrl || this.svgSourceUrl == "") {
                svg_opt.removeSvg();
                $('.right-CAD').html('NO Data');
                $('.right-CAD').css({
                    'display': 'flex',
                    'align-items': 'center',
                    'justify-content': 'space-evenly',
                    'font-size': '15px'
                });
                return;
            } else {
                // fetch(this.svgSourceUrl)
                //     .then(async response => {
                //         // 处理响应的数据
                //         if (response.status != 200) {
                //             svg_opt.removeSvg();
                //             $('.right-CAD').html('NO Data');
                //             $('.right-CAD').css({
                //                 'display': 'flex',
                //                 'align-items': 'center',
                //                 'justify-content': 'space-evenly',
                //                 'font-size': '15px'
                //             });
                //             return
                //         }
                //         window.open(this.currentItem.path);
                //     })
                //     .catch(async error => {
                //     });
            }



            this.isSvgLoading = true;
            showLoading();
            svg_opt.setSvgLineWidthRatio(1.5);
            svg_opt.setSvgBoundingBoxRatio(0, 0, 1);
            svg_opt.setCanClickSelectMarkup(true);

            svg_opt.setCanEditSelectMarkup(false);
            svg_opt.setCanFitPositionAndScale(false);
            svg_opt.setEditDotWidthRatio(3);
            setInterval(() => {
                hideLoading();
            }, 1000);
            let proPassNum = this.proPass.lastIndexOf(".") + 1;
            let originExt = this.proPass.substring(proPassNum);
            svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", this.onSvgMousePosChange, true,
                    0,
                    0,
                    originExt == "wmf" ? 1 : -1);
            svg_opt.SetSvgMouseMode(0);
            svg_opt.setLoadCallBack(this.onSvgLoaded);
            console.log(this.svgSourceUrl);


        }
    },

    mounted() {

        this.initFn();
    },
};
</script>

<style lang="scss" scoped>
.right-CAD {
    width: 100%;
    min-height: 100%;
}
</style>
